<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>在线答题</title>

    <link href="${root}css/square/green.css" rel="stylesheet">
    <link rel="stylesheet" href="${root}css/common.css"/>
    <link rel="stylesheet" href="${root}css/test.css"/>

</head>
<body>

<div class="begin_logo">
    <div class="begin_img">
        <img src="${root}images/logo.png" alt=""/>
    </div>
    <div class="begin">
        <p>本次答题建议40分钟</p>
        <a href="#" class="begining">开始答题</a>
        <a href="#" class="back">返回</a>
    </div>
</div>




<div class="mod">
    <h1>还有 <span></span> 道题未完成</h1>
    <a href="#">继续答题</a>
</div>

<!--导航栏-->
<!--:include("/inc/course/header.html"){}  -->
<script src="${root}js/icheck.min.js"></script>
<!-- 左侧练习题-->

<section style="padding-top: 61px;">
<div class="test_left">
<h1 style="font-size: 22px;"><b>${course.title!}</b></h1><br/>
    <ul id="test_list">
        <!-- 题目根据获取的后台数据动态生成---------->
    </ul>
</div>
<!-- 右侧状态显示-->
<div class="test_right">
    <!-- 答题剩余时间 -->
    <div class="test_time">
        <div class="time">
            <i class="iconfont icon-time"></i>&nbsp;<span>答题时间</span>
            <div class="time-item" style="display: inline-block; font-size: 20px">
                <strong id="mytime">00:00:00</strong>
            </div>
            <span>(建议40分钟)</span>
        </div>
        <div class="count">
            <i class="iconfont icon-shuxie"></i>&nbsp;<span>答题数量</span>&nbsp;<em class="idno">0</em><em>/</em><em class="allidno"></em>
        </div>
    </div>
    <!-- 题目编号-->
    <div class="test_num">
        <!-- 动态生成a标签------------------------------->
    </div>
    <!--交卷-->
    <div class="test_sub">
        <a id='btn' href="#">我要交卷</a>
    </div>
</div>
</section>
<script>
$('.back').on('click',function (){
	window.history.go(-1);
})

$('.begining').on('click', function () {
    //删除logo页面
    $('.begin_logo').remove();
    time_fun();
})

//页面进入开始倒计时
    var date=new Date();
    function two_char(n) {
        return n >= 10 ? n : "0" + n;
    }
    function time_fun() {
        var sec=0;
        setInterval(function () {
            sec++;
            var date = new Date(0, 0)
            date.setSeconds(sec);
            var h = date.getHours(), m = date.getMinutes(), s = date.getSeconds();
            document.getElementById("mytime").innerText = two_char(h) + ":" + two_char(m) + ":" + two_char(s);
        }, 1000);
    }

/**
 * 对Date的扩展，将 Date 转化为指定格式的String
 * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符
 * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
 * eg:
 * (new Date()).format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
 * (new Date()).format("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04
 * (new Date()).format("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04
 * (new Date()).format("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04
 * (new Date()).format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
 */
    Date.prototype.format=function(fmt) {
    var o = {
        "M+" : this.getMonth()+1, //月份
        "d+" : this.getDate(), //日
        "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时
        "H+" : this.getHours(), //小时
        "m+" : this.getMinutes(), //分
        "s+" : this.getSeconds(), //秒
        "q+" : Math.floor((this.getMonth()+3)/3), //季度
        "S" : this.getMilliseconds() //毫秒
    };
    var week = {
        "0" : "/u65e5",
        "1" : "/u4e00",
        "2" : "/u4e8c",
        "3" : "/u4e09",
        "4" : "/u56db",
        "5" : "/u4e94",
        "6" : "/u516d"
    };
    if(/(y+)/.test(fmt)){
        fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
    }
    if(/(E+)/.test(fmt)){
        fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]);
    }
    for(var k in o){
        if(new RegExp("("+ k +")").test(fmt)){
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
        }
    }
    return fmt;
}
var result=[]
//需求：
//        // 1、点击按钮 向后台异步请求数据
//        // 2、后台获取数据 并返回给 客户端
//        // 3、 浏览器 拿到数据后 ，按照一定的格式 展示出来
    $(document).ready(function () {
        $.ajax({
            type: "get",
            url: "${root}json/test/test?id=${p.id!}",
            data: {},
            dataType: "text",
            success: function (data1) {
            	var data=eval('('+data1+')');
                //  创建一个模板   遍历数组 用li标签的形式来展示大量数据
                document.querySelector('.allidno').innerHTML = data.length;
                var html = '';
                //外层循环获取一共有多少道题
                
                for (var i = 0; i < data.length; i++) {                    
                	var res={};
                    html += '<li id="test_' + data[i].name + '">';
                    html += '<p>' + data[i].title + '</p>';
                    //内层循环获取每道题的有几个选项
                    var list=eval('('+data[i].list+')');
                    for (var j = 0; j < list.length; j++) {
                        html += ' <div class="check" id="' + i + 'test_' + list[j].value + '">';
                        html += '<input class="' + i + 'test_' + list[j].value + '"  type="' + data[i].type + '" name="' + data[i].name + '" value="' + list[j].value + '"/>';
                        html += '<lable for="test_' + list[j].value + '">' + list[j].lable + '</lable>';
                        html += ' </div>';
                    }
                    html += ' <div>';
                    html += '<span>';
                    html += '<a href="#">反馈</a> | 题目来源：心教育';
                    html += ' </span>';
                    html += ' </div>';

                    html += '</li>';

                    //把数据库中的数据取出来，存储到自己定义的数组中
                    res["name"]=data[i].name;
                    res["list"]=data[i].list;
                    res["title"]=data[i].title;
                    res["type"]=data[i].type;
                    res["val"]=data[i].val;
                    
                    result.push(res);
                }




                //把动态生成的html模板添加到页面的ul标签中
                document.getElementById("test_list").innerHTML = html;

                //动态生成右侧的题号
                var html1 = '';
                for (var i = 0; i < data.length; i++) {
                    html1 += '<a data-numid="' + data[i].name + '" href="#test_' + data[i].name + '">' + data[i].name + '</a>';
                }
                //把动态生成的html1模板添加到页面的ul标签中
                document.querySelector('.test_num').innerHTML = html1;

                //模板添加成功之后初始化iCkeck插件的input框样式
                $('input').iCheck({
                    checkboxClass: 'icheckbox_square-green',
                    radioClass: 'iradio_square-green',
                    increaseArea: '20%' // optional
                });
                //判断哪些题答完，想对应的习题标号背景变蓝
                $('input').on('ifChecked', function () {
                    if ($(this).val() == null) {
                        console.log(111)
                    } else {
                        var num = $(this).context.name;//获取当前点击的input的name值
                        var id = num;//name值隐式转换
                        //每一题相对应的a标签改变样式
                        $("a[data-numid = " + id + "]").addClass('active');
                        //已做完几道题动态改变
                        var a_arr = [];
                        $('a[class="active"]').each(function () {
                            a_arr.push('active');
                        })
                        document.querySelector('.idno').innerHTML = a_arr.length;
                    }
                });
                //点击div让当前ｄｉｖ下的ｉｎｐｕｔ　按钮显示选中状态
                $('.check').on('click', function () {
                    // div 的id 和input的id 相同 用来关联用
                    var idClass = $(this).context.id;
                    $('.' + idClass + '').iCheck('check'); //将输入框的状态设置为checked
                })
            }
        })

    })
        //点击交卷
        //需求：
        // 1、点击交卷按钮 获取数据
        // 2、想后台发送数据，跳转到新页面
    document.querySelector('#btn').onclick = function () {
            // 获取 以答题完毕idno 和  总题数allidno的值
            var done = $('.idno').text();
            var sum = $('.allidno').html();
            //交卷判断答题情况，如果全部答题完毕，获取数据传递到后台

            //获取单选框和多选框的值，返回一个数组

            var r=$('input[type="radio"]:checked')
            for(var i = 0; i < r.length; i++){
                result[i].uval= r[i].value;
                console.log(r[i].value);
            }
            console.log(result)



//        如果答题数和总题数相等，那么获取数据交卷，如果不想等提示继续做题
            if (done == sum) {
//            点击交卷 获取交卷的时间
                var dateEnd = new Date();

                console.log(date.format("yyyy-MM-dd hh:mm:ss"));
                console.log(dateEnd.format("yyyy-MM-dd hh:mm:ss"))

//            ajax  提交数据。。。。。。。。。。。。。。。。。。。。。。。。。。
               
                var turnForm = document.createElement("form");
                document.body.appendChild(turnForm);
                turnForm.method = 'post';
                turnForm.action = '${root}test/result';
                var newElement = document.createElement("input");
                newElement.setAttribute("name","result");
                newElement.setAttribute("type","hidden");
                newElement.setAttribute("value",JSON.stringify(result));
                turnForm.appendChild(newElement);
                var newElement1 = document.createElement("input");
                newElement1.setAttribute("name","start_time");
                newElement1.setAttribute("type","hidden");
                newElement1.setAttribute("value",date.format("yyyy-MM-dd hh:mm:ss"));
                turnForm.appendChild(newElement1);
                var newElement2 = document.createElement("input");
                newElement2.setAttribute("name","end_time");
                newElement2.setAttribute("type","hidden");
                newElement2.setAttribute("value",dateEnd.format("yyyy-MM-dd hh:mm:ss"));
                turnForm.appendChild(newElement2);
                var newElement3 = document.createElement("input");
                newElement3.setAttribute("name","course_id");
                newElement3.setAttribute("type","hidden");
                newElement3.setAttribute("value","${p.id!}");
                turnForm.appendChild(newElement3);
                turnForm.submit();
//            数据发送给后台后跳转到完成页面course_id
            } else {
                //如果未全部答完，显示弹出层，提醒用户还有几道题未完成
                var init = sum - done
                document.querySelector('.mod span').innerHTML = init;
                $('.mod').css('display', 'block');
                $('.mod a').on('click', function () {
                    $('.mod').css('display', 'none');
                })
            }

        }
</script>

</body>
</html>